<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>产品详情</title>
    <#--<meta name="viewport" content="initial-scale=1, maximum-scale=1">-->
    <meta name="viewport" content="width=view-width,height=view-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
<#--<link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">-->
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/idangerous.swiper.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/layout.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_3mgu42g42easjor.css">
    <style>
        .offline-item {
            background: #FFFFFF;
            border-bottom: 1px solid #dadada;
            padding: 0 15px;
            padding-bottom: 10px;
        }

        .offline-item h1 {
            font-size: 14px;
            font-weight: normal;
            height: 44px;
            line-height: 44px;
            text-overflow: ellipsis;
        }

        .offline-item p {
            margin: 0;
            margin-top: 5px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
        }

        .swiper-wrapper {
            max-height: 250px;
            height: auto;
        }

        .swiper-slide {
            max-height: 250px;
        }

        .swiper-slide img {
            width: 100%;
        }

        .red-slide {
            background: #ca4040;
        }

        .blue-slide {
            background: #4390ee;
        }

        .orange-slide {
            background: #ff8604;
        }

        .green-slide {
            background: #49a430;
        }

        .pink-slide {
            background: #973e76;
        }

        .swiper-slide .title {
            font-style: italic;
            font-size: 42px;
            margin-top: 80px;
            margin-bottom: 0;
            line-height: 45px;
        }

        .swiper-pagination {
            position: absolute;
            z-index: 20;
            margin:0 auto;
            left: 45%!important;
            bottom: 10px;
        }

        .swiper-pagination-switch {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #222;
            margin-right: 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
            background: no-repeat;
        }

        .swiper-visible-switch {
            background: #aaa;
        }

        .swiper-active-switch {
            background: #fff;
        }

        /*轮播图 分页居中*/
        .swiper-pagination {
            left: 50% !important;
            transform: translateX(-50%);
            -weibkit-transform: translateX(-50%);
        }
    </style>
</head>

<body>
<div class="page-group">
    <div class="page">
        <!--搜索栏内容 !-->
        <header class="bar bar-nav  product-bar">
            <a class="icon icon-left pull-left" href="${basepath}/front/catalog/toCatalogList">返回</a>

            <h1 class="title">商品详情</h1>
        </header>
        <!--内容部分 !-->
        <div class="content product-content">
            <!--列表页面 !-->
            <!-- 幻灯片Slider -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 商品详情 -->
            <div class="product-card card ">
            </div>
            <!-- 促销信息 -->
            <!-- 数量信息 -->
            <div class="please-card card">
                <div class="card-content">
                    <div class="list-block">
                        <ul>
                            <li>
                                <a href="#" class="item-link item-content" id="specBtn">
                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                    <div class="item-inner">
                                        <input type="hidden" class="productID">

                                        <div class="item-title"><span class="select-size">选择尺码，</span><span
                                                class="colour">主要颜色</span></div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 数量信息弹出框 -->
            <div class="spec-popup  popup popup-about">
                <div class="ctrl-ui-sku">
                    <div class="sku-pro">
                        <div>
                            <img id="productImg">

                            <div class="sku-pro-info">
                                <div>
                                    <input type="hidden" class="specId">

                                    <p class="price">￥<span class="pop-price">124</span></p>

                                    <p class="quantity"><label class="label">库存</label>:<span
                                            class="pop-stock">2694</span></p>
                                <#--<p class="sku-txt"><span class="c-sku"></span><span-->
                                <#--class="unc-sku">请选择: 尺码 颜色分类</span></p>-->
                                </div>
                            </div>
                            <div class="close-popup"><span class="icon iconfont icon-guanbi"></span></div>
                        </div>
                    </div>
                    <div class="sku-info">
                        <div class="sku-spec">

                        </div>
                        <div>
                            <h2 class="g-num">
                                <span>购买数量</span>

                                <div class="quantity-info">
                                    <a class="btn reduce" min="1" id="sub" href="javascript:void(0);">-</a>
                                    <input type="text" min="1" value="1" id="bookNum">
                                    <a class="btn plus" max="1366">+</a>
                                </div>
                            </h2>
                        </div>
                    </div>
                    <p class="buttons-row p-inner">
                        <a href="#" id="joinCartBtn">加入购物车</a>
                        <a href="#" id="purchaseBtn" class="p-pur not">立即购买</a>
                    </p>

                    <p class="buttons-row p-out">
                        <a href="#" id="confirmJoin">确定</a>
                    </p>

                    <p class="buttons-row p-pur">
                        <a href="#" id="purBuy" data-url="${basepath}/front/order/toOrderDetailList">立即购买</a>
                    </p>
                </div>
            </div>
            <!-- 标签页 -->
            <div class="buttons-tab">
                <a href="#goodsDet-tab" class="tab-link active button" data-type="p">商品详情</a>
            </div>
            <div class="tabs">
                <div id="goodsDet-tab" class="tab active">
                </div>
            </div>
        </div>
        <nav class="bar bar-tab" id="tool-bar">

            <a class="tab-item external show-cartList">
                <span class="icon iconfont icon-gouwuche"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a " class="tab-item" id="joinBtn">加入购物车</a>
            <a href="#" class="tab-item" id="purBtn">立即购买</a>
        </nav>
        <input type="hidden" value="no" id="refreshed">
    </div>
</div>

<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/idangerous.swiper.min.js' charset='utf-8'></script>
<script>$.config = {router: false}</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<#--<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>-->
<script type='text/javascript' src="${staticpath}/front/dist/js/productDetails.js"></script>
<script>$.init()</script>
<script>
    onload=function(){
        var e=document.getElementById("refreshed");
        if(e.value=="no")
            e.value="yes";
        else{e.value="no";location.reload();}
    }
</script>
</body>
</html>
